<template>
  <div>
    <Row>
      <i-col span="24" class="operation_item y_query_right">
        <Select placeholder="请选择日期" style="width:140px;margin-right: 1rem;" @on-change="selectChange">
          <Option value="1" >今天</Option>
          <Option value="2" >昨天</Option>
          <Option value="3" >近7天</Option>
          <Option value="4" >近1个月</Option>
        </Select>
        <DatePicker placeholder="开始时间" type="date" @on-change="chooseStartDate" format="yyyy-MM-dd"
                    style="min-width: 150px" class="y_condition"></DatePicker>
        -
        <DatePicker placeholder="截止时间" type="date" @on-change="chooseEndDate" format="yyyy-MM-dd"
                    class="y_condition"></DatePicker>
        <Button type="primary" icon="md-search" @click="search()" class="y_condition">查询</Button>
      </i-col>
    </Row>

    <br/>
    <!--表格和分页-->
<!--    <Table stripe border :context="this" :columns="tTable" :data="tData.list" class="table_css" no-data-text="暂无数据"></Table>-->
    <List style="border-top: 1px solid #e8eaec;border-bottom: 1px solid #e8eaec;margin-top: 1rem;margin-bottom: 1rem;">
      <template v-if="tData.list.length == 0">
        <ListItem><div style="width: 100%; text-align: center;">暂无数据</div></ListItem>
      </template>
      <list-item class="list_item" v-for="(item,index) in tData.list">
        <div style="width:100%;padding: 0 0.5rem;"  >
          <Row type="flex" justify="start" >
            <i-col flex="auto" style="text-align: left;padding-left: 1rem;" >
              <KeyValueView>#{{index+1}}</KeyValueView>
              <KeyValueView title="员工">{{item.userName}}</KeyValueView>
              <KeyValueView title="排查产品">{{item.sumCount}}</KeyValueView>
              <KeyValueView title="正常数量">{{item.normalCount}}</KeyValueView>
              <KeyValueView title="下架数量" >{{item.soldOutCount}}</KeyValueView>
              <KeyValueView title="排查百分比">{{item.percent}}</KeyValueView>
            </i-col>
          </Row>
        </div>
      </list-item>
    </List>
    <div style="float: right;">
      <Page :total="page.total" :page-size="page.stepNumber" :current="page.currentPage" @on-change="changePage"
            @on-page-size-change="sizeChange" :page-size-opts="[20,40,60,100]"
            show-sizer show-elevator/>
    </div>

  </div>
</template>

<script>
import tiyData from "./js/statistics/statistics_data";
import {webList,msToDate} from "./js/statistics/statistics_fun";
import KeyValueView from "../widgets/KeyValueView";


export default {
  data() {
    return {
      page: tiyData.tPage,
      tParam: tiyData.tParam,
      tTable:tiyData.tTable(this),
      tData: tiyData.tData,
    }
  },
  components: {KeyValueView},
  methods:{
    chooseStartDate(date){
      if(date == null || date === "" || date == undefined){
        tiyData.tParam.startTime="";
      }else{
        tiyData.tParam.startTime = date+' 00:00:00';
      }
    },
    chooseEndDate(date){
      if(date == null || date === "" || date == undefined){
        tiyData.tParam.startTime="";
      }
      else{
        tiyData.tParam.endTime = date+' 23:59:59';
      }
    },
    search() {
      webList(this, tiyData);
    },
    changePage(page) {
      tiyData.tPage.currentPage = page;
      webList(this, tiyData);
    },
    sizeChange(page) {
      tiyData.tPage.stepNumber = page;
      webList(this, tiyData);
    },
    selectChange(value){
      let now = new Date();
      let today=msToDate(now);
      switch (value){
        case "1":
          this.tParam.startTime = today;
          this.tParam.endTime = today;
          break;
        case "2":
          const yesterday = new Date();
          yesterday.setTime(yesterday.getTime() - 3600 * 1000 * 24);
          let yesterdayStr=msToDate(yesterday);
          this.tParam.startTime = yesterdayStr;
          this.tParam.endTime = yesterdayStr;
          break;
        case "3":
          const week = new Date();
          week.setTime(week.getTime() - 3600 * 1000 * 24*7);
          let weekStr=msToDate(week);
          this.tParam.startTime = weekStr;
          this.tParam.endTime = today;
          break;
        case "4":
          const month = new Date();
          month.setTime(month.getTime() - 3600 * 1000 * 24*30);
          let monthStr=msToDate(month);
          this.tParam.startTime = monthStr;
          this.tParam.endTime = today;
          break;
      }
    },
  }
}
</script>

<style lang="less" scoped>
@import  (once,optional)  "../css/base";

.list_item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.list_item:hover {
  background: @tiySectionColor;
}
</style>
